<template>
  <view class="page">
    <u-navbar title="转发动态" :title-bold="true" :title-color="'#303133'">
      <view
        class="navbar-btn"
        slot="right"
        @click="putComment(forwardData.attach)"
        :style="{ background: globPrimaryColor }"
        >发布
      </view>
    </u-navbar>
    <textarea :value="textvalue" placeholder="输入内容～" @input="bindIpt"></textarea>
    <view class="forward">
      <view class="forward-head u-line-1">
        <text class="forward-head-name">@{{ forwardData.nick_name }}:</text>
        <text class="forward-head-text">{{ forwardData.content }}</text>
      </view>
      <image
        v-if="forwardData.attach_url.length != 0"
        :src="forwardData.attach_url[0]"
        class="forward-img"
      ></image>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      option: {},
      forwardData: {
        attach_url: [],
      },

      textvalue: '',

      isSend: false,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  onLoad(option) {
    this.option = option
    this.getForward()
  },
  methods: {
    getForward() {
      this.$edu.api
        .getRecircle({
          orignal_id: this.option.orignal_id,
        })
        .then((res) => {
          this.forwardData = res.data
        })
    },
    bindIpt(e) {
      this.textvalue = e.detail.value
      this.isSend = this.textvalue == '' ? false : true
    },
    // 转发动态
    putComment(_attach) {
      this.$edu.api
        .postRecircle({
          orignal_id: this.option.orignal_id,
          owner_id: this.option.owner_id,
          content: this.textvalue,
          // attach: _attach.join()
        })
        .then((res) => {
          uni.navigateBack({})
        })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  padding: 0 30rpx;
  background: #fffffe;
}

/* #ifdef MP-WEIXIN */
.page {
  padding: 0 30rpx;
}
/deep/.u-title {
  text-align: left;
}
/* #endif */

.navbar-btn {
  height: 56rpx;
  width: 100rpx;
  font-size: 30rpx;
  line-height: 56rpx;
  text-align: center;
  color: #fffffe;
  margin-right: 30rpx;
  border-radius: 6rpx;
}

textarea {
  width: 100%;
  height: 300rpx;
  margin-top: 44rpx;
}

.forward {
  padding: 20rpx;
  height: auto;
  background: #f7f7f7;
  margin-top: 20rpx;

  &-head {
    height: 38rpx;
    width: 100%;
    overflow: hidden;
    font-size: 26rpx;
    letter-spacing: 1px;

    &-name {
      color: #303133;
      line-height: 38rpx;
    }

    &-text {
      margin-left: 10rpx;
      color: #909399;
      line-height: 38rpx;
      height: 38rpx;
    }
  }

  &-img {
    height: 128rpx;
    width: 128rpx;
    margin-top: 16rpx;
  }
}
</style>
